<template>
  <div id="app">
  <div class="logo">
  <img src="../assets/logo.png" alt="">
  </div>
  <p class='account'>帐号登录</p>
  <van-form @submit="onSubmit">
  <!-- 通过 pattern 进行正则校验 -->
<van-field
    v-model="username"
    name="username"
    placeholder="邮箱/手机号码/小米ID"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button  block  type="warning" color="#f60"  native-type="submit" text='登录' style="border-radius:10px;">
    </van-button >
      <van-button style='margin-top:16px; border-radius:10px;' block native-type="submit" text='手机短信登录/注册' to="verificationlogin">
    </van-button>
    <p class="title">
   <a href="javascript:;">立即注册</a>
   <i>|</i>
   <a href="javascript:;">忘了密码?</a>
    </p>
  </div>
  <van-divider>其他方式登录</van-divider>
  <div class='footer'>
    <li><a href="javascript:;" class='iconfont  icon-weibo'></a></li>
    <li><a href="javascript:;" class='iconfont  icon-iconfonticons'></a></li>
    <li><a href="javascript:;" class='iconfont  icon-weixin'></a></li>
    <li><a href="javascript:;" class='iconfont  icon-facebook'></a></li>
  </div>
</van-form>
  </div>
</template>
<script>
import { Notify } from 'vant'
export default {
  props: [],
  data () {
    return {
      username: '',
      password: ''
    }
  },
  mounted () {},
  methods: {
    async onSubmit (values) {
      // console.log('submit', values)
      const { data: res } = await this.$http.get('/login')
      // console.log(res)
      if (res.data.meta.status === 0) {
        if (res.data.data[0].username === this.username && res.data.data[0].password === this.password) {
          // 主要通知
          Notify({ message: '登录成功', duration: 1000, background: '#79d70f' })
          window.sessionStorage.setItem('isLogin', true)
          setTimeout(() => {
            this.$router.push('/')
          }, 500)
        } else {
          Notify({ message: '登录失败', duration: 1000, background: '#ffa41b' })
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
#app {
  margin-top:150px;
}
.logo {
  position: relative;
    width:50px;
    height: 50px;
    // background-color: #f60;
    margin:0 auto;
    img {
      border-radius:30%;
      width:50px;
      height: 50px;
    }
}
    .account {
      text-align: center;
      width:100px;
      font-size: 17px;
      margin:0 auto;
}
.title {
  width:200px;
  height: 40px;
  line-height: 40px;
  margin:10px auto;
  text-align: center;
  a {
  text-decoration: none;
  color: #ccc;
}
i {
    margin:0 5px;
    color:#ccc;
}
}
.footer {
  width:100%;
  height: 50px;
  line-height:50px;
  margin:0 auto;
  text-align: center;
  li:first-child {
    background-color:#e97171;
  }
  li:nth-child(2) {
  background-color:#6bb6ea;
  }
    li:nth-child(3) {
  background-color:#00be00;
  }
    li:last-child {
    background-color:rgba(24,129,228);
  }
  li {
    width:40px;
    height: 40px;
    display:inline-block;
    list-style: none;
    border-radius: 50%;
    background-color:#f60;
    line-height:40px;
    margin:0 10px;
    a {
    text-decoration: none;
    color: #fff;
    font-size: 25px;
  }
}
}
.van-field{
    font-size: 16px;
}
</style>
